<script setup lang="ts">
import { computed, reactive, ref } from "vue"
import type {Edge} from "pack-antv-x6"
import { ElTable, ElTableColumn, ElButton, vLoading, ElPagination,ElInput } from "element-plus"
import {transToTime} from "../../util"
import { ts } from "../../i18n"
import Nifi from "../../nifi";
import { chunk, } from "lodash-es"

const { nifi, id } = defineProps<{ nifi: Nifi, id: string }>()

const t = ts('quene.list')

const list = reactive<any[]>([])
const loading = ref(false)
const pages = reactive({ pageNum: 1, pageSize: 10, total: 0, sizes: [], layout: "prev, pager, next, total" })
const search = ref('')
const data = computed(() => {
    const s = search.value;
    return chunk(s ? list.filter(d => d.uuid.includes(s) || d.filename.includes(s)) : list, pages.pageSize)[pages.pageNum - 1] || []
})

const refresh = async () => {
    loading.value = true;
    const res = await nifi.Quene.getList(id)
    list.length = 0;
    if (res.flowFileSummaries) {
        list.push(...res.flowFileSummaries.reverse())
    }
    pages.total = list.length;
    loading.value = false

}

refresh();

const handleView = async (row:any) => { 
    const res = await nifi.Quene.getContent(id,row.uuid)
    console.log(res)
}
const handleDown = (row:any) => { 
    nifi.Quene.downContent(id,row.uuid,row.filename + '.txt')
}
const handleDetail = (row:any) => {
    nifi.Quene.openDetail(id,row.uuid)
 }
const handleGoProvance = (row:any) => {
    const edge = nifi.graph.getCellById(id) as  Edge;
    const sid = edge.getSourceCellId()
    console.log(sid)
    nifi.Provenance.open(sid,row.uuid)
}

</script>

<template>
    <div class="w-full h-full flex flex-col">
        <div class="flex-1 overflow-hidden">
            <ElTable :data="data" v-loading="loading" class="w-full important-h-full">
                <ElTableColumn :label="t('column.label.index')" show-overflow-tooltip width="60" align="center">
                    <template #header>
                        <ElButton link type="success" :title="t('column.title.refresh')" @click="refresh">
                            <div class="i-ri:refresh-line"></div>
                        </ElButton>
                    </template>
                    <template #default="{ $index }">{{ pages.pageSize * (pages.pageNum - 1) + $index + 1 }}</template>
                </ElTableColumn>
                <ElTableColumn prop="uuid" :label="t('column.label.uuid')" show-overflow-tooltip></ElTableColumn>
                <ElTableColumn prop="filename" :label="t('column.label.filename')" show-overflow-tooltip>
                </ElTableColumn>
                <ElTableColumn prop="size" :label="t('column.label.filesize')">
                    <template #default="{row}">{{ row.size }} bytes</template>
                </ElTableColumn>
                <ElTableColumn prop="queuedDuration" :label="t('column.label.quene duration')">
                    <template #default="{row}">{{ transToTime(row.queuedDuration) }}</template>
                </ElTableColumn>
                <ElTableColumn prop="lineageDuration" :label="t('column.label.lineage duration')">
                    <template #default="{row}">{{ transToTime(row.lineageDuration) }}</template>
                </ElTableColumn>
                <ElTableColumn :label="t('column.label.operate')">
                    <template #header>
                        <ElInput  v-model="search" :placeholder="t('column.placeholder.search')" size="small" ></ElInput>
                    </template>
                    <template #default="{ row }">
                        <ElButton link :title="t('column.title.detail')" @click="handleDetail(row)"><div class="i-fluent-color:apps-list-detail-20"></div></ElButton>
                        <ElButton link :title="t('column.title.view content')" @click="handleView(row)" type="success"><div class="i-lsicon:view-filled"></div></ElButton>
                        <ElButton link :title="t('column.title.download')" @click="handleDown(row)" type="warning"><div class="i-line-md:download-loop"></div></ElButton>
                        <ElButton link :title="t('column.title.provance')" @click="handleGoProvance(row)" type="primary"><div class="i-fa6-solid:right-long"></div></ElButton>
                    </template>
                </ElTableColumn>
            </ElTable>

        </div>
        <div v-if="pages.total > pages.pageSize" class="h-40px flex justify-end items-end">
            <ElPagination v-model:current-page="pages.pageNum" v-model:page-size="pages.pageSize" :total="pages.total"
                :page-sizes="pages.sizes" :layout="pages.layout"></ElPagination>
        </div>
    </div>
</template>